<template>
  <view class="page-container">
    <!--  菜单栏  -->
    <view class="card-container">
      <template v-for="menu in menuList">
        <MenuField
          v-if="menu.show !== false"
          :key="menu.key"
          :menu-key="menu.key"
          :title="menu.title"
          :icon="menu.icon"
          :url="menu.url"
          :type="menu.type"
          :more-params="menu.moreParams"
        />
      </template>
    </view>
  </view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

import MenuField from '@/components/menu-field/menu-field.vue'
import { useGlobalSetting } from '@/settings'

@Component({ name: 'MoreSetting', components: { MenuField } })
export default class MoreSetting extends Vue {
  get menuList(): MenuItem[] {
    const { checkAuth } = useGlobalSetting()
    return [
      {
        key: 'menu-3',
        icon: '/static/my/menu/icon-10.png',
        title: '消息订阅',
        url: '',
        type: 'subscribe'
      },
      {
        key: 'menu-4',
        icon: '/static/my/menu/icon-4.png',
        title: '操作手册'
      },
      {
        key: 'menu-5',
        icon: '/static/my/menu/icon-5.png',
        title: '密码管理',
        url: '/pages/my-modules/update-password',
        type: 'page',
        show: checkAuth
      },
      {
        key: 'menu-6',
        icon: '/static/my/menu/icon-6.png',
        title: '帮助中心'
      },
      {
        key: 'menu-7',
        icon: '/static/my/menu/icon-7.png',
        title: '技术支持',
        url: '/pages/my-modules/support',
        type: 'page'
      },
      {
        key: 'menu-8',
        icon: '/static/my/menu/icon-9.png',
        title: '关于我们',
        url: '/pages/my-modules/about',
        type: 'page'
      }
    ]
  }
}
</script>
